<!--
 * @Author: hifishroom
 * @Date: 2021-08-19 12:29:44
 * @LastEditTime: 2021-09-01 23:55:47
 * @FilePath: \index\src\views\login\Login.vue
-->
<template>
  <div>
    <div class="login-wraper">
      <div class="icon-login">
        <div class="iconfont login-icon">&#xe799;</div>
        <div class="ripple"></div>
        <div class="ripple"></div>
        <div class="ripple"></div>
      </div>
      <div class="login-form" v-if="flag && isFlag == false">
        <label for="username">账号</label>
        <input type="text" id="username" v-model="user" />
        <br />
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" />
        <div class="form-bottom">
          <span @click="regis">没有账号?请注册</span>
          <span @click="phone">手机登录</span>
        </div>
        <br />
        <button>登录</button>
      </div>

      <div class="login-form" v-else-if="flag == false && isFlag == false">
        <label for="username">手机号</label>
        <input type="text" id="username" v-model="user" />
        <br />
        <label for="form-code">密码</label>
        <input type="text" id="form-code" v-model="password" />
        <div class="form-bottom">
          <span @click="regis">没有账号?请注册</span>
          <span @click="emile">邮箱登录</span>
        </div>
        <br />
        <button @click="phoneRegister">登录</button>
      </div>

      <div class="login-form" v-if="isFlag">
        <label for="username">手机号</label>
        <input type="text" id="username" />
        <br />
        <span>验证码</span>
        <input type="text" id="form-code" /><span>获取验证码</span>
        <br />
        <label for="password">密码</label>
        <input type="password" id="password" />
        <br />
        <label for="nickname">昵称</label>
        <input type="nickname" id="nickname" />

        <div class="form-bottom">
          <span>手机登录</span>
          <span>邮箱登录</span>
        </div>
        <br />
        <button @click="register">注册</button>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { getLogin } from "network/login";
export default {
  name: "Login",
  data() {
    return {
      flag: true,
      isFlag: false,
      username: "",
      password: "",
      code: "",
      user: ""
    };
  },
  methods: {
    phone() {
      this.flag = !this.flag;
    },
    emile() {
      this.flag = !this.flag;
    },
    regis() {
      this.isFlag = true;
      this.flag = false;
    },
    phoneRegister() {
      this.getLogin();
    },
    getLogin(user, password) {
      user = this.user;
      password = this.password;
      getLogin(user, password).then(res => {
        console.log(res);
        if (res.code == "502") {
          alert("密码错误");
        } else {
          alert("登录成功");
          console.log(res);
          this.$router.push({ path: "/home" });
          localStorage.setItem("id", JSON.stringify(res.account.id));
          localStorage.setItem("cookie", JSON.stringify(res.cookie));
          localStorage.setItem("token", JSON.stringify(res.token));
        }
      });
    }
  }
};
</script>

<style lang="scss">
.login-wraper {
  margin: 10% 10% 0;
}

.login-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  line-height: 1.7;
  font-size: 3em;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #c9dcdc4d;
}

.icon-login {
  position: relative;
  width: 100%;
  height: 300px;
  .ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #d2d2d2;
    animation: login 6s infinite linear;
    &:nth-child(3) {
      animation-delay: 9s;
    }
    &:nth-child(4) {
      animation-delay: 12s;
    }
  }
}

.form-bottom {
  display: flex;
  justify-content: space-between;
}

.login-form {
  margin-top: 25%;
}

@keyframes login {
  to {
    width: 350px;
    height: 350px;
    opacity: 0;
  }
}
</style>
